<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>商家订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/owner_order.css"/>
	</head>
	<style>
		.mui-table-view-cell {
			padding: 6px 6px;
		}
		
		.stop {
			background: #efeff4;
		}
		
		.cop {
			display: flex;
			width: 100%;
		}
		
		.cop-img {
			width: 30px;
		}
		
		.cop-p {
			flex: 2;
		}
		
		.cop-p p {
			margin-top: 5px;
			color: #333333;
		}
		
		.cop-span {
			color: #e53e30;
		}
		
		.cop-span span {
			display: block;
			padding: 7px 0;
		}
		
		.mui-table-view .mui-media-object {
			max-width: 100px;
			height: 100px;
			margin-left: 13px;
		}
		
		.boay-p {
			display: flex;
		}
		
		.boay-p p:nth-child(1) {
			flex: 1;
			color: #333333;
			font-size: 16px;
		}
		
		.boay-p p:nth-child(2) {
			padding-right: 11px;
			color: #E53E30;
			font-size: 16px;
		}
		
		.cuu {
			text-align: right;
			padding-right: 11px;
		}
		/*订单详情*/
		
		.top-botm {
			display: flex;
		}
		
		.top-botm_a {
			border-bottom: 1px solid #D7D7DC;
			
		}
		
		.top-botm p {
			margin: 0;
			text-align: right;
		}
		
		.top-botm p a {
			color: #333333;
		}
		
		.ptop {
			padding-bottom: 14px;
			padding-top: 10px;
		}
		
		.top-botm p:nth-child(2) em,
		.top-botm p:nth-child(2) span {
			color: #e53e30;
		}
		
		.top-botm p:nth-child(2) span,
		.top-botm p:nth-child(2) em {
			font-size: 18px;
		}
		/*已收货*/
		
		.yes-1 {
			color: #f0ad4e;
		}
		
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
			border-bottom: 0;
		}
		
		.whole {
			padding: 0 15px;
			margin-top:10px;
			display: none;
		}
	</style>
	<body>

		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商家订单</h1>
		</header>

		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-indicator mui-segmented-control ctl_list mui-segmented-control-inverted">
					<a class="mui-control-item" href="#">待处理</a>
					<a class="mui-control-item" href="#">已发货</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group white">
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-card">
							<!--待处理-->
							<div class="mui-card-header whi">
								<div class="cop">
									<div class="cop-img">
										<img src="img/wait.png" />
									</div>
									<div class="cop-p">
										<p>单号：<span>1548599580</span></p>
									</div>
									<div class="cop-span">
										<span>未确认</span>
									</div>
								</div>
							</div>
							<!--图片-->
							<div class="mui-card-content">
								<ul class="mui-table-view stop">
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--订单详情-->
							<div class="mui-card-footer top-botm">
								<p>
									<a href="order_details.html">订单详情</a>
								</p>
								<p>共<span> 2 </span>件商品 合计：<em>￥156.00</em></p>
							</div>
						</div>
						<div class="mui-card">
							<!--待处理-->
							<div class="mui-card-header whi">
								<div class="cop">
									<div class="cop-img">
										<img src="img/wait.png" />
									</div>
									<div class="cop-p">
										<p>单号：<span>1548599580</span></p>
									</div>
									<div class="cop-span">
										<span>未确认</span>
									</div>
								</div>
							</div>
							<!--图片-->
							<div class="mui-card-content">
								<ul class="mui-table-view stop">
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--订单详情-->
							<div class="mui-card-footer top-botm">
								<p>
									<a href="order_details.html">订单详情</a>
								</p>
								<p>共<span> 2 </span>件商品 合计：<em>￥156.00</em></p>
							</div>
						</div>
					</div>
					<!--已收货-->
					<div id="item2" class="mui-slider-item mui-control-content">
						<div class="mui-card">
							<!--已收货-->
							<div class="mui-card-header whi">
								<div class="cop">
									<div class="cop-img">
										<img src="img/yes-1-1.png" />
									</div>
									<div class="cop-p">
										<p>单号：<span>1548599580</span></p>
									</div>
									<div class="cop-span">
										<span class="yes-1">已收货</span>
									</div>
								</div>
							</div>
							<!--图片-->
							<div class="mui-card-content">
								<ul class="mui-table-view stop">
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--订单详情-->
							<div class="mui-card-footer top-botm top-botm_a">
								<p>
									<a href="javascript:void(0)" class="details">订单详情</a>
								</p>
								<p>共<span> 2 </span>件商品 合计：<em>￥156.00</em></p>
							</div>
							<div class="whole">
								<p>姓名: <span>张三</span></p>
								<p>手机: <span>1234567810</span></p>
								<p>地址: <span>中国 北京 东城区 天安门</span></p>
								<p>下单时间: <span>2019-1-27 22:33:00</span></p>
							</div>
						</div>
						<div class="mui-card">
							<!--已收货-->
							<div class="mui-card-header whi">
								<div class="cop">
									<div class="cop-img">
										<img src="img/yes-1-1.png" />
									</div>
									<div class="cop-p">
										<p>单号：<span>1548599580</span></p>
									</div>
									<div class="cop-span">
										<span class="yes-1">已收货</span>
									</div>
								</div>
							</div>
							<!--图片-->
							<div class="mui-card-content">
								<ul class="mui-table-view stop">
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media ptop">
										<a href="javascript:;">
											<img class="mui-media-object mui-pull-left" src="img/1547826906a.jpg">
											<div class="mui-media-body boay-p">
												<p>测试商品</p>
												<p>￥<span>0.01</span></p>
											</div>
											<div class="cuu">
												<p>x1</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
							<!--订单详情-->
							<div class="mui-card-footer top-botm top-botm_a">
								<p>
									<a href="javascript:void(0)" class="details">订单详情</a>
								</p>
								<p>共<span> 2 </span>件商品 合计：<em>￥156.00</em></p>
							</div>
							<div class="whole">
								<p>姓名: <span>张三</span></p>
								<p>手机: <span>1234567810</span></p>
								<p>地址: <span>中国 北京 东城区 天安门</span></p>
								<p>下单时间: <span>2019-1-27 22:33:00</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		</div>
		</div>
		</div>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui('.ctl_list').on('tap', '.mui-control-item', e => {
				mui('.mui-slider').slider().gotoItem($(e.target).index())
			})
			
			
			mui('#item2').on('tap','.details',function(){
				let index = $('.details').index(this)
				$(".whole").eq(index).slideToggle(300);
			})
			
			
			
		</script>
	</body>

</html>